<template>
    <div class="ivu-pt-16">
        <Card :bordered="false" dis-hover>
            <Row>
                <Col span="6">
                <div class="title no-right">
                    客服手机列表({{ wechattotal }})
                </div>
                <div class="content-container no-right">
                    <div style="height: 100%; position: relative;">
                        <div v-for="item in wechatlist" :class="
                            params.wechat_id === item.wechatid
                                ? 'active'
                                : ''
                        " :key="item.wechatid" @click="getwechatcontact(item.wechatid, true)">
                            <div class="ivu-mb-16 ivu-p-8" style="
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                    ">
                                <div class="ivu-mr-8" v-width="40">
                                    <Avatar size="large" :src="item.avatar || baseImg" ></Avatar>
                                </div>
                                <div class="ivu-mr-8" style="flex: 1;">
                                    <h3>
                                        {{ item.wechatnick }}
                                    </h3>
                                    <p v-font="12" v-color="'#888'">
                                        {{ item.wechatno }}
                                        <span v-if="item.nickname">({{item.nickname}})</span>
                                    </p>
                                </div>
                                <div v-width="60">
                                    <Badge :status="
                                        +item.isonline === 0
                                            ? 'success'
                                            : 'default'
                                    " :text="item.isonline_str" ></Badge>
                                </div>
                            </div>
                            <!-- <Row
                                    type="flex"
                                    justify="space-between"
                                    align="middle"
                                    class="ivu-mb-16 ivu-p-8"
                                >
                                    <Col class="ivu-mr-8" v-width="40">
                                        <Avatar
                                            size="large"
                                            :src="item.avatar||baseImg"
                                        />
                                    </Col>
                                    <Col class="ivu-mr-8">
                                        <h3>
                                            {{ item.wechatnick }}
                                        </h3>
                                        <p v-font="12" v-color="'#888'">
                                            {{ item.wechatno }}
                                        </p>
                                    </Col>
                                    <Col>
                                        <Badge
                                            :status="
                                                +item.isonline === 0
                                                    ? 'success'
                                                    : 'default'
                                            "
                                            :text="item.isonline_str"
                                        />
                                    </Col>
                                </Row> -->
                        </div>
                        <Spin size="large" fix v-if="wechatShow"></Spin>
                    </div>
                </div>
                </Col>
                <Col span="5">
                <div class="title no-right" style="display: flex;justify-content: space-between;">
                    <span>通讯录({{ wechatcontacttotal }}) 
                        <Icon v-if="params.wechat_id==''" class="ivu-ml-8 " type="md-sync"  size="18"></Icon>
                        <Icon v-else @click="changeupdate(params.wechat_id)" class="ivu-ml-8 icon" type="md-sync" color="#19be6b" size="18"></Icon>
                    </span>
                    <span><Checkbox :disabled="params.wechat_id==''" v-model="params.is_reply" @on-change="getwechatcontact(params.wechat_id)">未回复</Checkbox></span>
                </div>
                <div class="content-container no-right" style="display: flex; flex-direction: column;"
                     v-if="params.wechat_id">
                    <Input class="ivu-mb-8" clearable v-model="params.keywords" placeholder="请输入微信号或昵称"
                           @on-enter="getwechatcontact(params.wechat_id)" @on-clear="getwechatcontact(params.wechat_id)" ></Input>
                    <div style="flex: 1; position: relative;">
                        <template v-for="(item, index) in wechatcontactlist">
                            <div class="ivu-p-8" :key="item.value" :class="name === item.value ? 'active' : ''"
                                 @click="simulationfun(item, index)">
                                <Row type="flex" align="middle" justify="space-between">
                                    <Col>
                                    <strong>{{ item.value }}（{{
                                        item.total
                                    }}）</strong>
                                    </Col>
                                    <Col>
                                    <strong v-if="item.total > 0">
                                        <Icon type="ios-arrow-down" v-if="
                                            name === item.value
                                        " ></Icon>
                                        <Icon type="ios-arrow-forward" v-else ></Icon>
                                    </strong>
                                    </Col>
                                </Row>
                            </div>
                            <simulationlist :key="index" :data="item" :name="name" :showRepair="true" @clickwx="getwechatmessages"  @clickup="changeupdata" :ref="`simulation${index}`" ></simulationlist>
                        </template>
                    </div>
                </div>
                <div class="content-container no-right" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        " v-else>
                    <font color="#999">请选择客服手机</font>
                </div>

                <Spin size="large" fix v-if="wechatcontactShow"></Spin>
                </Col>
                <Col span="13">
                <div class="title">聊天记录({{ wechatmessagetotal }})</div>
                <div class="wxkeywords ivu-p-8">
                    <Row type="flex" align="middle" justify="space-between">
                        <Col style="display: flex; align-item: center;">
                        <strong class="ivu-mr-8">
                            <Ellipsis v-if="friendinfo.nickname" :text="friendinfo.nickname" :length="10" tooltip ></Ellipsis>
                        </strong>
                        <span class="ivu-mr-8">{{
                            friendinfo.friend_wechatno
                        }}</span>
                        <span class="ivu-mr-8">{{
                            friendinfo.gender_str
                        }}</span>
                        <span class="ivu-mr-8">{{
                            friendinfo.province
                        }}</span>
                        <span class="ivu-mr-8">{{
                            friendinfo.remark_name
                        }}</span>
                        </Col>
                        <Col style="display: flex; align-item: center;">
                        <div v-if="+friendinfo.id !== 0" @click="gotopatient({id:friendinfo.id})">
                            <span class="ivu-mr-8" style="cursor:pointer;color:#2b85e4">{{
                                friendinfo.user_name
                            }}</span>
                            <span class="ivu-mr-8" style="cursor:pointer;color:#2b85e4">{{
                                friendinfo.gender_str
                            }}</span>
                            <span style="cursor:pointer;color:#2b85e4" class="ivu-mr-8" v-if="
                                friendinfo.age &&
                                    friendinfo.age !== ''
                            ">{{ friendinfo.age }}岁</span>
                            <span class="ivu-mr-8">
                                <Tag v-if="
                                    friendinfo.status_name ===
                                        '失效'
                                " color="blue">{{ friendinfo.status_name }}</Tag>
                                <Tag v-else-if="
                                    friendinfo.status_name ===
                                        '跟进中'
                                " color="volcano">{{ friendinfo.status_name }}</Tag>
                                <Tag v-else-if="
                                    friendinfo.status_name ===
                                        '预约'
                                " color="cyan">{{ friendinfo.status_name }}</Tag>
                                <Tag v-else-if="
                                    friendinfo.status_name ===
                                        '到诊'
                                " color="green">{{ friendinfo.status_name }}</Tag>
                                <Tag v-else-if="
                                    friendinfo.status_name ===
                                        '已到老患者'
                                " color="orange">{{ friendinfo.status_name }}</Tag>
                                <Tag v-else-if="friendinfo.status_name" color="orange">{{ friendinfo.status_name }}
                                </Tag>
                            </span>
                        </div>
                        </Col>
                    </Row>
                </div>
                <div class="content-container content-containers">
                    <chatDetail :paramsrecord="params1" ref="liaotian" @total="
                        (e) => {
                            wechatmessagetotal = e;
                        }
                    " @clickkeyword="getfriendinfo" ></chatDetail>
                </div>
                </Col>
            </Row>
        </Card>
        <patient-detail ref="patientDetail" :btnShow="btnShow" @cancelDrawer="askDataing" ></patient-detail>
        <Modal
            v-model="modal"
            footer-hide>
            <p style="text-align: center;font-size:16px">通讯录正在同步，2分钟后请重新刷新该页面</p>
        </Modal>
        <Modal
            v-model="modalStatus"
            footer-hide>
            <p style="text-align: center;font-size:16px">聊天记录正在同步，请稍候重新点击查看（约3-5分钟后）</p>
        </Modal>
    </div>
</template>
<script>
 import Cookies from 'js-cookie';
    import {
        customerwechatlist,
        customerwechatmessagelist,
        customerwechatconverfile,
        customerwechatcontactlist,
        wechatfriendQueue,
        wechatmessageQueue
    } from '@/api/hqapi/indexone.js';
    import patientDetail from '@/components/patientDetail';
    import chatDetail from './chatrecord';
    import simulationlist from './simulationlist';
    // import simulationlist from "./simulationlists";
    export default {
        name: 'chatRecord',
        components: { chatDetail, simulationlist, patientDetail },
        data() {
            return {
                btnShow: [
                    {
                        name: 'patient-index-sub5',
                        flag: 'v1/patient/index/sub',
                    },
                    {
                        name: 'patient-index-edit-remark5',
                        flag: 'v1/patient/index/edit-remark',
                    },
                    {
                        name: 'v1-patient-index-update',
                        flag: 'v1/patient/index/update',
                    },
                    {
                        name: 'patient-callback-callback-common-list4',
                        flag: 'v1/patient/callback/callback-common-list',
                    },
                    {
                        name: 'patient-index-edit-tags10',
                        flag: 'v1/patient/index/edit-tags',
                    },
                    {
                        name: 'patient-index-edit-tags13',
                        flag: 'v1/patient/index/edit-tags',
                    },
                ],
                baseImg: require('@/assets/images/avaters.png'),
                friendinfo: {},
                name: '',
                wechatlist: [],
                wechattotal: 0,
                wechatcontactlist: [],
                wechatcontacttotal: 0,
                wechatmessagelist: [],
                wechatmessagetotal: 0,
                loading: false,
                loadingwechatcontact: false,
                params: { wechat_id: '', keywords: '', is_reply: false },
                keywords: '',
                wechatShow: false,
                wechatcontactShow: false,
                params1: { wechat_id: '', friend_id: '', keywords: '' ,id: ''},
                modal: false,
                modalStatus: false,
                state: true,
                timeStatus: true,
                temporaryData: []
            };
        },
        /* 挂载完成能访问DOM元素 */
        mounted() {
            this.initial();
        },
        methods: {
            gotopatient(row) {
                this.$refs.patientDetail.handleOpen(row);
            },
            /* @函数功能: 初始化 */
            initial() {
                this.getwechat();
            },
            getwechat() {
                this.wechatShow = true;
                customerwechatlist().then(res => {
                    this.wechatShow = false;
                    if(res.list.length > 0) {
                        this.wechatlist = res.list;
                        this.wechattotal = res.total;
                        this.askData();
                    }
                });
            },
            askDataing() {
                this.$nextTick(() => {
                    this.$refs.liaotian.askDatacancel();
                    this.$refs.liaotian.askData('end');
                });
            },
            askData() {
                this.wechatcontactlist = [];
                this.wechatcontacttotal = 0;
                this.wechatmessagelist = [];
                this.wechatmessagetotal = 0;
                // if (this.wechatlist.length > 0)
                //     this.getwechatcontact(this.wechatlist[0].wechatid);
            },
            getwechatcontact(wechat_id, bool) {
                if(this.wechatcontactShow) {
                    this.$Message.error('数据加载中，请勿重复点击');
                    return;
                }
                if(bool) this.params.is_reply = false;
                this.wechatcontactShow = true;
                this.wechatcontactlist = [];
                this.name = undefined;
                this.friendinfo = {};
                this.$nextTick(() => {
                    this.$refs.liaotian.askDatacancel();
                });
                this.params.wechat_id = wechat_id;
                let params = {
                    wechat_id: this.params.wechat_id,
                    keywords: this.params.keywords,
                    is_reply: this.params.is_reply ? 1 : 0
                };
                customerwechatcontactlist(params).then(res => {
                    // for (let item of res.list) {
                    //     for (let its of item.child) {
                    //         if (its.lats_create_date) {
                    //             this.logs(11, its.id);
                    //         }
                    //     }
                    // }
                    this.wechatmessagetotal = 0;
                    this.wechatcontactShow = false;
                    if(res.list.length > 0) {
                        this.wechatcontactlist = res.list;
                        this.wechatcontacttotal = res.total;
                        // for (let item of res.list) {
                        //     if (+item.total > 0) {
                        //         this.name = item.value;
                        //         break;
                        //     }
                        // }
                    }
                });
            },
            getwechatmessages(item) {
                //  var millisecond = new Date().getTime();
                // var expiresTime = new Date(millisecond + 60 * 1000 * 3);
                
                // Cookies.set('dengta-newid',item.id, {
                // expires: expiresTime,
                // });
                // Cookies.set(`dengta-id`, item.id);
                // console.log(item,'item')
                this.params1.id = item.id;
                this.params1.wechat_id = item.wechatid;
                this.params1.friend_id = item.friendid;
                this.$nextTick(() => {
                    this.$refs.liaotian.askDatacancel();
                    this.$refs.liaotian.askData('end');
                });
            },
            //
            changeupdata(item){
                this.temporaryData.forEach(element => {
                    if (element.friendid === item.friendid && element.wechatid === item.wechatid) {
                        // element.timeStatus = false;
                        const params = {
                            type: 3,
                            wechatid: item.wechatid,
                            friendid: item.friendid
                        };
                        if (element.timeStatus) {
                            wechatmessageQueue(params).then(res => {
                                this.modalStatus = true;
                                element.timeStatus = false;
                                setTimeout(() => {
                                    element.timeStatus = true;
                                }, 180000);
                            }).catch(() => {
                                this.modalStatus = false;
                                element.timeStatus = false;
                                setTimeout(() => {
                                    element.timeStatus = true;
                                }, 180000);
                            });
                        } 
                    }
                });
                // console.log(item,'111');
               
            },
            simulationfun(data, index) {
                this.temporaryData = data.child.map(item => {
                    return {
                        ...item, timeStatus: true
                    }; 
                    });
                if(+data.total === 0) return;
                if(this.name === data.value) this.name = undefined;
                else this.name = data.value;
            },
            getfriendinfo(e) {
                this.friendinfo = e;
            },
            // 更新数据
            changeupdate(val){
                // console.log(val,'qq');
                if(this.state){
                    this.state = false;
                    wechatfriendQueue({wechatid: val}).then(res => {
                        this.modal = true;
                        setTimeout(() => {
                            this.state = true;
                        },180000);
                    }).catch(() => {
                        this.modal = false;
                    });
                }
              
                //
            }
        },
    };
</script>
<style lang="less" scoped>
    .content-container {
        padding: 16px;
        height: 655px;
        // height: 700px;
        border: 1px solid #ccc;
        overflow: auto;

        h3 {
            font-size: 14px;
        }

        .active {
            background: #e2e2e2;
        }

        .wechat-item {
            cursor: pointer;
        }

        .no-result {
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            font-weight: bold;
        }
    }

    .content-containers {
        height: 605px;
        // height: 650px;
    }

    .wxkeywords {
        height: 50px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    .title {
        padding: 10px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    .serach {
        width: 260px;
        margin-top: -5px;
    }

    .no-right {
        border-right: 0;
    }

    .search-icon {
        cursor: pointer;
    }
    .icon{
        cursor: pointer;
    }
</style>